<template>
	<view class="page page-fill">
		<u-navbar :is-back="true" :title="title" title-color="white" :background="background"></u-navbar>		
		<form @submit="formSubmitNickname">
			
			<view class="page-block" style="margin-top: 20upx;">
				<input 
					type="text"
					name="nickname"
					:value="globalUser.nickname" 
					class="input"
					placeholder="请输入昵称"
					placeholder-class="graywords"
					maxlength="10"
					/>
			</view>
			
			<button type="primary" form-type="submit" class="submitBtn">提交</button>
			
		</form>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"我的昵称",
				background:{
					backgroundImage:'linear-gradient(to top, #ffd655 0%, #fda085 100%)',
				},
				globalUser: {}
			}
		},
		onLoad() {
			var me = this;
			var globalUser = me.getGlobalUser("globalUser");
			me.globalUser = globalUser;
			var userSkey = me.globalUser.user.skey;
			me.userSkey = userSkey;
		},
		methods: {
			formSubmitNickname(e) {
				var me = this;
				var nickname = e.detail.value.nickname;
				console.log(me.userSkey);
				uni.request({
					url: me.baseUrl + "/mini_program/user-wechat/editUser/" + me.userSkey,
					data: {
						"nickName": nickname
						/* "avatarUrl": avatarUrl */
					},
					method: "POST",
					success(res) {
						//debugger
						var resData = res.data;
						console.log(resData);
						if (resData.code == 20000) {
							// 获得最新的用户数据
							var userInfo = resData.data;
							console.log(userInfo);
							uni.setStorageSync("globalUser", userInfo);
							uni.navigateBack({
								delta: 2
							})
						} else if (resData.code == 502 || resData.code == 500) {
							uni.showToast({
								title: res.data.msg,
								image: "../../static/icos/error.png",
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading();
					}
				})
			}
			
		}
	}
</script>

<style>
	/* 页面铺满屏幕 */
	.page-fill {
		width:100%;
		height: 100%;
		position: absolute;
	}
	
	.graywords {
		color: #EAEAEA;
	}
	
	.input {
		height: 80upx;
		line-height: 80upx;
		width: 500upx;
		margin-left: 40upx;
	}
	
	.submitBtn {
		width: 95%;
		margin-top: 40upx;
	}
</style>
